<style scoped src="./index.scss" lang="scss" rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
// import helloworld from '@/components/helloworld/index.vue';
const message = [
    "vue.draggable",
    "draggable",
    "component",
    "for",
    "vue.js 2.0",
    "based",
    "on",
    "Sortablejs",
];
export default {
    mixins: [
        Vue.prototype.$vFN.Mixins.Base,
        Vue.prototype.$vFN.Mixins.Page,
        Vue.prototype.$vFN.Mixins.Table,
    ],
    components: {
        GoodsListInfo: async () =>
            Vue.extend(
                await Vue.prototype.$vFN.Components.Base.GoodsListInfo()
            ),
        SelectAddressMap: async () =>
            Vue.extend(
                await Vue.prototype.$vFN.Components.Base.SelectAddressMap()
            ),
        SelectAddress: async () =>
            Vue.extend(
                await Vue.prototype.$vFN.Components.Base.SelectAddress()
            ),
        SelectVideo: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectVideo()),
        SelectImageCheckbox: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectImageCheckbox()),
        SelectImageRadio: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectImageRadio()),
        SelectAudio: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectAudio()),
        SelectGoods: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectGoods()),
        DragResize: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.DragResize()),
        Draggable: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.Draggable()),
        SelectDateCycleApplication: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.SelectDateCycleApplication()),
    },
    computed: {},
    data() {
        return {
            appWindow: window,
            radioValue: 1,
            selectGoodsValue: {
                type: "goods",
                data: [115, 114, 113],
                options: ["goods", "classify", "group", "all"],
            },
            count: 2,
            imageList: [],
            imageString:"",
            selectImageWxValue: [],
            addressData: null,

            videoList: [],
            audioList: [],


            SelectAddressMapValue:null,

            dragResizeVal: {
                width: 0,
                height: 0,
                top: 0,
                left: 0,
            },

            myDraggableArray: message.map((name, index) => {
                return {
                    name,
                    order: index + 1,
                };
            }),
            drag: false,


            dateCycleApplication: [

            ] // 已有的数据
        };
    },
    methods: {
       
        sort() {
            this.myDraggableArray = this.myDraggableArray.sort(
                (a, b) => a.order - b.order
            );
        },
        SelectGoods() {
            this.$vFN.Directives.SelectGoods({
                data: this.selectGoodsValue.data,
                type: this.selectGoodsValue.type,
                options: this.selectGoodsValue.options,
                onSuccess: (res) => {
                    console.error(res, "35");
                    // this.goodsList = res.data;
                    // this.type = res.type;

                    // // this.list = res.data;
                    // // this.type = res.type;
                },
            });
        },
        selectGoodsChange(r) {
            console.error(r, "45");
        },

        SelectResourcesWxImage() {
            this.$vFN.Directives.SelectResourcesImage({
                mode: "wx",
                count: this.count - this.selectImageWxValue.length,
                onSuccess: (res) => {
                    this.selectImageWxValue = res.data;
                },
            });
        },
        SelectLink() {
            this.$vFN.Directives.SelectLink({
                onSuccess: (res) => {
                    // this.$set(this.formData[type_][index_], "typeLink", res.type)
                    // this.$set(this.formData[type_][index_], "nameLink", res.name)
                    // this.$set(this.formData[type_][index_], "pathLink", res.path)
                },
            });
        },
        SelectAddress() {
            this.$vFN.Directives.SelectAddress({
                appWindow: this.appWindow,
                selected: this.addressData,
                onSuccess: (res) => {
                    console.error(res);
                    this.addressData = res.data;
                },
            });
        },
        SelectAddress2(_type) {
            this.$vFN.Directives.SelectAddress({
                appWindow: this.appWindow,
                level: _type,
                selected: this.addressData,
                onSuccess: (res) => {
                    console.error(res);
                    this.addressData = res.data;
                },
            });
        },

        SelectImage() {
            this.$vFN.Directives.SelectResourcesImage({
                appWindow: this.appWindow,
                count: this.count - this.imageList.length,
                onSuccess: (res) => {
                    this.imageList = res.data;
                },
            });
        },
        setImageValue(r) {
            console.error(r);
        },
        SelectVideo() {
            this.$vFN.Directives.SelectResourcesVideo({
                appWindow: this.appWindow,
                count: 2 - this.videoList.length,
                onSuccess: (res) => {
                    let _selectValue = this.videoList;
                    res.data.map((item) => {
                        _selectValue.push(item);
                    });
                    console.error(res);
                    this.videoList = _selectValue;
                },
            });
        },
        setVideoValue(r) {
            console.error(r);
        },
        SelectAudio() {
            this.$vFN.Directives.SelectResourcesAudio({
                appWindow: this.appWindow,
                count: 2 - this.audioList.length,
                onSuccess: (res) => {
                    let _selectValue = this.audioList;
                    res.data.map((item) => {
                        _selectValue.push(item);
                    });
                    console.error(res);
                    this.audioList = _selectValue;
                },
            });
        },

        setAudioValue(r) {
            console.error(r);
        },

        resize(newRect) {
            this.dragResizeVal.width = newRect.width;
            this.dragResizeVal.height = newRect.height;
            this.dragResizeVal.top = newRect.top;
            this.dragResizeVal.left = newRect.left;
        },
    },
    mounted() {},
    activated() {},
};
</script>